<!DOCTYPE html>
<html lang="zh-cn" >
<head>
    <title>数据交换单元流水日志管理</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<#include "../../../__ref_common.ftl" parse=true/>
    <style>
        .el-tooltip, .el-table .el-tooltip, .el-tooltip__rel {
            display: inline-block;
        }

        .pagination-container, .paginationCommon {
            text-align: right;
            margin: 10px 0;
        }
        .content-title {
            margin-left: 15px;
            color: rgb(71, 86, 105);
            padding-left: 8px;
            border-left: 2px solid rgb(71, 86, 105);
        }

        .content-header {
            height: 42px;
            background-color: #fff;
            line-height: 42px;
            font-size: 14px;
            color: #A2B0C4;
        }
    </style>
</head>
<body>
<div id="main" class="layout">
    <elx-main>
        <div id="content">
            <div id="stateLog">
                <div class="content-header">
                <span class="content-title">数据交换单元日志流水<span>
                </div>
                <el-form :inline="true"   class="demo-form-inline " >
                    <el-form-item  label="单元订单号" >
                        <el-input v-model="queryCond.unitProcId" placeholder="请填写单元订单号"></el-input>
                    </el-form-item>
                    <el-form-item  label="处理单元" >
                        <el-input v-model="queryCond.unitCode" placeholder="请填写处理单元"></el-input>
                    </el-form-item>
                    <el-form-item  label="批次" >
                        <el-input v-model="queryCond.batchNo" placeholder="请填写批次"></el-input>
                    </el-form-item>
                    <el-form-item  label="是否翻牌" >
                        <el-select v-model="queryCond.isTurnover"  >
                            <el-option v-for="item in turnOverEnum" :label="item.label" :value="item.value"></el-option>
                        </el-select >
                    </el-form-item>
                    </el-form-item>
                    <el-form-item  label="状态" >
                        <el-select v-model="queryCond.state"  >
                            <el-option v-for="item in stateEnum" :label="item.label" :value="item.value"></el-option>
                        </el-select >
                    </el-form-item>
                    <el-form-item class="button-group">
                        <el-button type="info" icon="search" @click.native="getTableData">查询</el-button>
                    </el-form-item>
                </el-form>

                <el-table :data="logData" class="form-content" v-loading="loading" border style="width:100%"   @row-dblclick="queryTaskLog">
                    <el-table-column label="单元订单号" property="unitProcId" show-overflow-tooltip></el-table-column>
                    <el-table-column label="处理单元" property="unitCode" show-overflow-tooltip></el-table-column>
                    <el-table-column label="批次" property="batchNo" width="100px" show-overflow-tooltip></el-table-column>
                    <el-table-column label="批次翻牌" property="isTurnover"  width="100px" :formatter="turnOverFormatter"  show-overflow-tooltip></el-table-column>
                    <el-table-column label="分片数" property="taskCnt" show-overflow-tooltip></el-table-column>
                    <el-table-column label="创建时间" property="createDate" show-overflow-tooltip></el-table-column>
                    <el-table-column label="状态" property="state"  :formatter="stateFormatter" show-overflow-tooltip></el-table-column>
                    <el-table-column label="执行信息" property="message" show-overflow-tooltip></el-table-column>
                </el-table>
                <div class="paginationCommon">
                    <el-pagination
                            @current-change="handleCurrentChange"
                            :page-size="stateLog.pageSize"
                            layout="total, prev, pager, next, jumper"
                            :current-page="stateLog.pageNum"
                            :total="stateLog.total">
                    </el-pagination>
                </div>
            </div>
        </div>
    </elx-main>
</div>
<script type="text/javascript">
    var _contextPath = '${mvcPath}';
    var vm = new Vue({
        el: "#main",
        data: function () {
            return {
                formLabelWidth: '120px',
                logData: [],
                taskLogData:[],
                queryCond: {
                    unitProcId:'${unitProcId!''}',
                    unitCode: '',
                    batchNo: '',
                    isTurnover: '',
                    state: ''
                },
                taskLogQueryCond: {
                    unitProcId:'',
                    unitCode: '',
                    batchNo: '',
                    isTurnover: '',
                    state: ''
                },
                taskTypeEnum:[
                    {label:"dp",value:"dp"},
                    {label:"stream",value:"stream"},
                    {label:"datax",value:"datax"}
                ],
                turnOverEnum:[
                    {label:"不翻",value:"0"},
                    {label:"翻",value:"1"}
                ],
                stateEnum:[
                    {label: '新建', value: '1'},
                    {label: '可运行', value: '2'},
                    {label: '正在运行', value: '3'},
                    {label: '资源阻塞', value: '4'},
                    {label: '依赖阻塞', value: '5'},
                    {label: '成功', value: '6'},
                    {label: '编译成功', value: '316'},
                    {label: '失败', value: '-1'}
                ],
                loading: false,
                stateLog:{
                    pageNum: 1,
                    pageSize: 5,
                    total: 0
                }

            }
        },
        methods:{
            getTableData: function () {
                var _self = this;
                $.ajax({
                    type: 'get',
                    url: '${mvcPath}/open/datastash/unit/state/eventlog?unitProcId='+ _self.queryCond.unitProcId+'&unitCode='+ _self.queryCond.unitCode+ '&batchNo='+ _self.queryCond.batchNo+ '&isTurnover='+ _self.queryCond.isTurnover+ '&state='+ _self.queryCond.state+ '&pageNum='+(_self.stateLog.pageNum-1)+'&pageSize='+_self.stateLog.pageSize,
                    async: true,
                    dataType: 'json',
                    success: function(data) {
                        _self.logData = data.content;
                        _self.stateLog.total = data.totalElements;
                    },
                    error: function(data) {

                    }
                });
            },
            queryTaskLog:function (row) {
                this.taskLogQueryCond.taskProcId="";
                this.taskLogQueryCond.taskProcId=row.taskProcId;
                this.getTaskLogData();
            },

            defineOnchange:function(){
                this.queryCond.dataDefineId="";
            },
            handleCurrentChange: function(val) {
                this.stateLog.pageNum = val;
                this.getTableData();
            },
            stateFormatter:function (val) {
                for(var i in this.stateEnum){
                    if( this.stateEnum[i].value==val.state){
                        return this.stateEnum[i].label;
                    }
                }
            },
            turnOverFormatter:function (val) {
                for(var i in this.turnOverEnum){
                    if( this.turnOverEnum[i].value==val.isTurnover){
                        return this.turnOverEnum[i].label;
                    }
                }
            },
            taskTypeFormatter:function (val) {
                for(var i in this.taskTypeEnum){
                    if( this.taskTypeEnum[i].value==val.taskType){
                        return this.taskTypeEnum[i].label;
                    }
                }
            }
        },
        watch: {
        },
        created: function () {
            this.getTableData();
        }
    })
</script>
</body>
</html>